<template>
  <div class="app-container">
    <!-- 顶部欢迎语 -->
    <el-card shadow="hover" class="welcome-card">
      <div class="welcome-title">欢迎来到宠物管理系统</div>
      <div class="welcome-subtitle">{{ currentWelcome }}</div>
      <div class="system-info">
        <div class="current-time">{{ currentTime }}</div>
        <div class="uptime">系统已稳定运行 {{ runDays }} 天</div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      welcomeMessages: [
        "祝您使用愉快！",
        "已处理0次宠物申请",
        "当前在线用户: 1人"
      ],
      currentWelcome: "",
      currentTime: '',
      runDays: 1, // 从1开始计数
      startDate: new Date(), // 记录系统启动日期
      timer: null,
      dayTimer: null
    }
  },
  created() {
    this.updateWelcomeMessage()
    this.updateTime()
    // 每秒更新时间
    this.timer = setInterval(this.updateTime, 1000)
    // 每天更新运行天数（24小时间隔）
    this.dayTimer = setInterval(this.updateRunDays, 24 * 60 * 60 * 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.dayTimer)
  },
  methods: {
    updateWelcomeMessage() {
      const hour = new Date().getHours()
      if (hour < 6) {
        this.currentWelcome = "凌晨好！"
      } else if (hour < 12) {
        this.currentWelcome = "上午好！"
      } else if (hour < 18) {
        this.currentWelcome = "下午好！"
      } else {
        this.currentWelcome = "晚上好！"
      }

      // 随机显示一条欢迎信息
      const randomIndex = Math.floor(Math.random() * this.welcomeMessages.length)
      this.currentWelcome += this.welcomeMessages[randomIndex]
    },
    updateTime() {
      this.currentTime = new Date().toLocaleString()
    },
    updateRunDays() {
      const today = new Date()
      const diffTime = today - this.startDate
      this.runDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)) + 1 // 保证至少1天
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-card {
  width: 80%;
  max-width: 800px;
  text-align: center;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  position: relative;
  padding: 40px 20px;

  .welcome-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 15px;
  }

  .welcome-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 25px;
    min-height: 24px;
  }

  .system-info {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .current-time {
      color: rgba(255,255,255,0.8);
      font-size: 16px;
    }

    .uptime {
      color: rgba(255,255,255,0.9);
      font-size: 16px;
      font-weight: 500;
    }
  }
}
</style>
